@import "bourbon/bourbon";

$messages-panel-transition-duration:1s;

#messages-panel:not(.active){
	position:absolute;
	height:20px;
	background-color:rgba(255,255,255,0);
	z-index:2;
	.messages-opener{
		border-bottom-left-radius:10px;
		border-bottom-right-radius:10px;
		background-color:#DDD;
	}
	.messages-opener:hover{
		background-color:#AAA;
	}
	.contents{
		background-color:rgba(200,200,200,1.0);
	}
}
$messages-panel-transitions:height $messages-panel-transition-duration,background-color $messages-panel-transition-duration;
#messages-panel.active{
	height:100%;
	position:fixed;
	background-color:rgba(200,200,200,0.9);
	z-index:99;
	.messages-opener{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
		background-color:#AAA;
	}
	.message-opener:hover{
		background-color:#666;
	}
	.contents{
		background-color:rgba(200,200,200,0.0);
	}
	@include transition($messages-panel-transitions);
}
@mixin attn{
	0%{
		background-color:#A90100;
	}
	100%{
		background-color:#D17717;
	}
}
@-webkit-keyframes attn{
	@include attn;
}
@-moz-keyframes attn{
	@include attn;
}
@keyframes attn{
	@include attn;
}

#messages-panel{
	.messages-opener{
		position:absolute;
		bottom:0px;
		padding-right:4px;
		padding-left:4px;
		margin-left:-30px;
		left:50%;
		overflow:hidden;
		width:60px;
		height:20px;
		display:block;
		color:black;
		text-decoration:none;
		text-align:center;
		font-size:13px;
		cursor:pointer;
		@include user-select(none);
		@include transition(border-bottom-left-radius $messages-panel-transition-duration,border-bottom-right-radius $messages-panel-transition-duration,border-top-left-radius $messages-panel-transition-duration,border-top-right-radius $messages-panel-transition-duration);
	}
	.messages-opener.attn{
		@include animation-name(attn);
		@include animation-duration(1.5s);
		@include animation-timing-function(ease);
		@include animation-iteration-count(infinite);
		@include animation-direction(alternate);
	}
	.contents{
		position:absolute;
		top:5px;
		left:0px;
		width:100%;
		bottom:25px;
		@include transition(bakcground-color $messages-panel-transition-duration);
		overflow:hidden;
		.sidebar{
			position:absolute;
			left:5px;
			top:5px;
			bottom:0px;
			width:200px;
			overflow-y:auto;
			overflow-x:hidden;
			background-color:rgba(56,68,55,0.73);
			.communique{
				min-height:30px;
				width:100%;
				cursor:pointer;
				@include user-select(none);
				.title{
					font-weight:bold;
				}
				.users{
					font-style:italic;
					margin-left:15px;
				}
			}
			.communique:not(:last-child){
				border-bottom:1px solid #222;
				margin-bottom:1px;
			}
			.communique.selected{
				background-color:green;
			}
			.communique.unread{
				background-color:orange;
			}
		}
		.main-pane{
			position:absolute;
			top:5px;
			left:210px;
			right:5px;
			bottom:0px;
			.overlay{
				position:absolute;
				top:0px;
				left:0px;
				right:0px;
				bottom:0px;
				background-color:rgba(200,200,200,0.75);
				.loading{
					width:100%;
					text-align:center;
					height:20px;
					font-weight:bold;
					margin-top:-10px;
					position:absolute;
					top:50%;
				}
				@include user-select(none);
			}
			.title{
				position:absolute;
				top:0px;
				left:0px;
				width:100%;
				height:20px;
				text-align:center;
			}
			.messages{
				position:absolute;
				top:20px;
				left:0px;
				right:0px;
				bottom:35px;
				overflow-x:hidden;
				overflow-y:auto;
				margin:0;
				padding:0;
				.load-more-messages-button{
					width:100%;
					@include button(pill);
				}
				.message-group{
					min-height:36px;
					width:100%;
					position:relative;
					.user{
						margin:0;
						padding:0;
						.pic{
							width:36px;
							height:36px;
							background-repeat:no-repeat;
							background-size:contain;
							background-position:center center;
							display:block;
						}
						.name,.time{
							font-size:10px;
							width:36px;
							text-align:center;
						}
						float:left;
					}
					.user:not(:hover){
						.time{
							display:none;
						}
					}
					.user:hover{
						.name{
							display:none;
						}
					}
					.message{
						position:absolute;
						left:50px;
						right:10px;
						overflow:hidden;
					}
					.clearer{
						clear:both;
					}
				}
				.message-group:not(:last-child){
					margin-bottom:10px;
				}
			}
			textarea{
				resize:none;
				position:absolute;
				bottom:0px;
				left:0px;
				right:0px;
				height:30px;
			}
		}
	}
	
	.template{
		display:none;
	}
	
	width:100%;
	left:0px;
	top:0px;
	@include transition($messages-panel-transitions , z-index 0.01s linear $messages-panel-transition-duration/*delay*/);
	overflow:hidden;
}
